<template>
  <div class="box">
    <p class="p_title">
      <el-button type="text" style="float: left;color: #000;font-size: 16px">配置权限</el-button>
    </p>
    <el-form>
      <p class="p-title">系统管理权限</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="roleListBox" @change="roleListEvent(roleListBox)" disabled>
            <el-checkbox
              v-for="data in roleList"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">项目报建权限</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box1"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">设计方案权限</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box2"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">施工许可权限</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box3"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">竣工验收权限</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box4"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">咨询服务权限</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box5"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">掘占路等咨询</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box6"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">竣工验收提前查看</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box7"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">事中事后监管权限</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box8"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p class="p-title">掘占路等许可权限</p>
      <el-row style="border: 1px solid rgb(242 242 242);padding: 10px">
        <el-col :offset="2" :span="21">
          <el-checkbox-group v-model="checked" @change="listEvent(checked)">
            <el-checkbox
              v-for="data in Box9"
              :label="data.id"
              :key="data.id">
              {{data.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </el-form>
    <div style="height: 30px;line-height: 30px;width: 50%;margin: 40px 0">
      <el-button type="primary" @click="submitAddRole" style="float: right">保存</el-button>
    </div>

  </div>
</template>

<script>
  import {$aos} from '../../../store/state';
  import {http} from '../../../assets/commonjs/axios';

  export default {
    name: "userRole",
    data() {
      return {
        UnitForm: {
          applyType: 4,//1：新建 2.编辑 3.删除 4 预览
          uid: null,
          urId: null
        },
        userIds: null,
        roleListBox: [],
        roleList: [],
        //1.项目信息 2.设计方案 3.施工许可 4.竣工验收 5.技术咨询 6.监管意见
        Box1: [],
        Box2: [],
        Box3: [],
        Box4: [],
        Box5: [],
        Box6: [],
        Box7: [],
        Box8: [],
        Box9: [],
        checked: [],
        urIdsList: '',
        urIdsListArr: '',
      }
    },
    created() {
      $aos.getItem('userData').then(res => {
        this.UnitForm.uid = res.uid;
      });
      $aos.getItem('urIdList').then(res => {
        this.urIdsList = res;
        this.urIdsListArr = res.split(',');
        if(this.urIdsListArr.length === 1){
          this.UnitForm.urId = res;
          this.userIds = res;
          this.seeqxEvent();
        }
      });
      this.getRoleAll();
    },
    methods: {
      getRoleAll() {
        http('post', 'permission/list_rights',).then(res => {
          if (res.data.success) {
            this.roleList = res.data.data.dirRights;
            let box = res.data.data.opeRights || [];
            if (box.length) {
              box.forEach((item) => {
                if (item.type === 1) {
                  this.Box1.push(item)
                } else if (item.type === 2) {
                  this.Box2.push(item)
                } else if (item.type === 3) {
                  this.Box3.push(item)
                } else if (item.type === 4) {
                  this.Box4.push(item)
                } else if (item.type === 5) {
                  this.Box5.push(item)
                } else if (item.type === 6) {
                  this.Box6.push(item)
                } else if (item.type === 7) {
                  this.Box7.push(item)
                } else if (item.type === 8) {
                  this.Box8.push(item)
                } else if (item.type === 9) {
                  this.Box9.push(item)
                }
              })
            }
          }
        })
      },
      roleListEvent(list) {
      },

      listEvent(list) {
      },

      //添加权限确定事件
      submitAddRole() {
        http('post', 'permission/give_rights_user', {
          dirRights: this.roleListBox.toString(),
          opeRights: this.checked.toString(),
          urIds: this.urIdsListArr.length === 1 ? this.userIds.toString() : this.urIdsList,
        }).then(res => {
          if (res.data.success) {
            this.$message({message: res.data.msg, type: 'success'});
            this.$router.push({path: '/container'});
          } else {
            this.$message({message: res.data.msg, type: 'warning'});
          }
        })

      },
      //查看权限
      seeqxEvent() {
        http('post', 'permission/opera_user', {
          user: this.UnitForm
        }).then(res => {
          if (res.data.success) {
            let data = res.data.data.sysUserRole;
            if (data.opeRightList && data.opeRightList.length > 0) {
              data.opeRightList.forEach((item) => {
                this.checked.push(item.id)
              })
            }
            if (data.dirRightList && data.dirRightList.length > 0) {
              data.dirRightList.forEach((item) => {
                this.roleListBox.push(item.id)
              })
            }
          }
        })
      }

    },

  }
</script>

<style scoped>
  .box {
    background: #fff;
    height: 100%;
    padding: 0 30px 50px 30px;
  }

  .p_title {
    padding: 10px 40px 10px 0;
    overflow: hidden;
    margin: 0;
  }
</style>
